﻿<!doctype html>
<html>
<head><meta charset="utf-8" /></head>
<title>昨夜星辰</title>
<style type="text/css">
	html, body { border: 0; margin: 0; height: 100%; height: 100%;}
	canvas { display: block; background-color: #000;}
</style>	

<body>
<canvas id="canvas2D"></canvas>

<script>
var width	= window.innerWidth;
var height	= window.innerHeight;
//var canva	= document.createElement('canvas');
//document.body.appendChild(canva);	
var canva	= document.getElementById('canvas2D');
canva.width	= width;
canva.height	= height;
var mousex	= width/2;
var mousey	= height/2;
var tx		= mousex;
var ty		= mousey;

g2D = canva.getContext("2d");
g2D.globalAlpha = 0.65;

var M = Math,
    rnd = M.random,
    sin = M.sin,
    floor = M.floor;

var speedMin	= 0.001;
var speed	= 0.05;
var stars	= [];
var numStar	= 2000;
var depth	= 10;
var kk		= 0.88;
var r		= 0.0;
var W = 205, Q = 0.2;

canva.addEventListener("mousemove",function(e)
{
	tx = e.clientX;
	ty = e.clientY;
});

function mouseScroll(e)
{
	var s = 0;
	if(e.detail) s = e.detail/3;
	else s = -e.wheelDelta/120;

	if(s>0 && speed<1||s<0 && speed+s/250>speedMin) speed += s/250;
}

canva.addEventListener("DOMMouseScroll",mouseScroll);
canva.addEventListener("mousewheel",mouseScroll);


function resetStar(s)
{
	s.x = (rnd() - 0.5)*width;
	s.y = (rnd() - 0.5)*height;
	s.z = depth;
}

// init
for(var i=0; i<numStar; i++)
{
	var s = {};
	resetStar(s);
	s.z = depth - 0.678*rnd()*depth;
	stars.push(s);
}

window.requestAnimFrame = (function ()
{
	return window.requestAnimationFrame ||
	       window.webkitRequestAnimationFrame ||
	       window.mozRequestAnimationFrame ||
	       window.oRequestAnimationFrame ||
	       window.msRequestAnimationFrame ||
	       function (/* function FrameRequestCallback */callback, /* DOMElement Element */element)
	{
		return window.setTimeout(callback, 1000 / 60);
	};
})();

function gameLoop() 
{
	window.requestAnimFrame( gameLoop );
	drawStars();
}

function drawStars()
{
	mousex = tx*(1-kk) + mousex*kk;
	mousey = ty*(1-kk) + mousey*kk;
	// clear
	g2D.fillStyle = "#000";
	g2D.fillRect(0,0,width,height);
	
//	g2D.fillStyle = "#fff";
//	g2D.fillRect(mousex, mousey, 10, 10);
	
	
	// stars
	for(var i = 0; i < numStar; i++)
	{
		var star = stars[i];
		
		var z = star.z - speed;
		var x = star.x * star.z/z;
		var y = star.y * star.z/z;
		starWidth = 3/star.z + 0.3;
		
		r=sin(Q*i + r) * 64 + W;
		var g=sin(Q*i+2+r) * 64 + W;
		var b=sin(Q*i+4+r) * 64 + W;
		
		if(star.x != 0)
		{
			g2D.strokeStyle = "rgb("+floor(r)+","+floor(g)+","+floor(b)+")";
			g2D.lineWidth = starWidth;
			g2D.beginPath();
			g2D.moveTo(x + mousex,  y + mousey);
			g2D.lineTo(star.x + mousex + 0.9,  star.y + mousey + 0.9);
			g2D.stroke();
    
//			g2D.fillStyle = "rgb("+floor(r)+","+floor(g)+","+floor(b)+")";
//			g2D.beginPath();
//			g2D.arc( x+ mousex, y+ mousey, starWidth, 0, Math.PI * 2, true );
//    			g2D.closePath();
//    			g2D.fill();

		}
		
		star.x = x;
		star.y = y;
		star.z = z;
		if(star.x > width || star.y > height || star.z < 2*speed) resetStar(star);
	}
	
	r += 0.1;
}

window.onload = gameLoop;

</script>
</body>
</html>